<template>
  <div>
      <el-container class="home_container">
         <el-header>
              <div>
                 <img src="../assets/heima.png" alt="">
                 <span>电商后台管理系统</span>
             </div>
             <el-button type="info" @click="logout">退出</el-button>
         </el-header>
         <el-container>
            <el-aside :width="asideWidth+'px'">
                <div class="toggle-button" @click="toggleMenu">| | |</div>
                 <el-menu
                    background-color="#333744"
                    text-color="#fff"
                    active-text-color="#409eff"
                    unique-opened
                    :collapse='isCollapse'
                    :collapse-transition='false'
                    router
                   :default-active="pathActive"
                    >
                    <!-- 导航栏模板 -->
                    <el-submenu :index="item.id+''"  v-for="item in menusList" :key="item.id">
                        <!-- 一级菜单 -->
                        <template slot="title">
                            <i :class="iconsObj[item.id]"></i>
                            <span>{{item.authName}}</span>
                        </template>
                        <!-- 二级菜单 -->
                        <el-menu-item :index="'/'+subItem.path" v-for="subItem in item.children" :key="subItem.id" @click="menuActive('/'+subItem.path)">
                            <i class="el-icon-location"></i>
                            <span>{{subItem.authName}}</span>
                        </el-menu-item>
                    </el-submenu>
                    </el-menu>
            </el-aside>
               <el-main>
                   <router-view></router-view>
               </el-main>
            </el-container>
     </el-container>
      
  </div>
</template>

<script>
export default {
    data(){
        return {
            menusList:'',
            iconsObj:{
                '125':'el-icon-user-solid',
                '103':'el-icon-s-cooperation',
                '101':'el-icon-s-goods',
                '102':'el-icon-tickets',
                '145':'el-icon-s-platform'
            },
            isCollapse:false,
            asideWidth:200,
            pathActive:''
        }
    },
    created(){
        this.getMenuList()
        this.pathActive = window.sessionStorage.getItem('pathActive')
    },
    methods:{
        logout(){
            sessionStorage.removeItem('token');
            this.$router.push('/login')
        },
        async getMenuList(){
            const{data:res} =  await this.$http.get('menus')
            // console.log(res)
            if(res.meta.status!==200) return this.$message.error(res.meta.msg)
            this.menusList = res.data

        },
        toggleMenu(){
            this.isCollapse = !this.isCollapse
            if(this.isCollapse){
                this.asideWidth = 64
            }else{
                this.asideWidth = 200
            }
            
        },
        menuActive(path){
            window.sessionStorage.setItem('pathActive',path)
            this.pathActive = path
        }
    }
}
</script>

<style lang='less'>
.home_container{
    height: 100vh;
}
.el-header{
    background-color: #373d41;
    display: flex;
    justify-content: space-between;
    padding-left: 0;
    align-items: center;
    color: #fff;
    font-size:20px ;
    >div{
        display: flex;
        align-items: center;
        span{
            margin-left: 15px;
        }
    }
   
}
.el-aside{
    background-color: #333744;
    .el-menu{
        border-right: none;
    }
    .toggle-button{
        font-size: 10px;
        color: #fff;
        background-color: #5a3519;
        text-align: center;
        line-height: 24px;
    }
}
.el-main{
    background-color: #eaedf1;
}


</style>